<template>
  <div class="index-wrap">
  <div class="index-left">
    <div class="index-left-block">
      <h2>全部产品</h2>
      <div v-for="(product, index) in productList" :key="index">
          <h3>{{product.title}}</h3>
          <ul>
            <li v-for="(item, index) in product.list" :key="index">
              <a :href="item.url">{{item.name}}</a>
              <span v-if="item.hot" class="hot-tag">Hot</span>
            </li>
          </ul>
          <div v-if="!product.last" class='hr'></div>
      </div>
  </div>
  <div class='index-left-block lastest-news'>
     <h2>最新消息</h2>
     <ul>
       <li v-for="(item,index) in getNewsList" :key="index">
         <a :href="item.url" class="new-item">{{item.title}}</a>
       </li>
     </ul>
  </div>
</div>
<div class='index-right'>
    <!--展示幻灯片 slideSpeed定义在data()方法中而不是computed()方法里-->
   <slide-show :slides="slides" :inv="slideSpeed" @onchange="dosomething()"></slide-show>
   <!--自我练习的demo -->
   <!-- <slide :slides="slides"></slide> -->
   <div class='index-board-list'>
      <div class="index-board-item" v-for="(item,index) in boardList" :key="index"
           :class="[{'line-last' : index % 2 !== 0},'index-board-'+item.id]">
        <div class="index-board-item-inner">
          <h2>{{item.title}}</h2>
          <p>{{item.descriptio}}</p>
          <div class="index-board-button">
          <a href="" class="button">立即购买</a>
          </div>
        </div>
      </div>
   </div> 

</div>
</div>
</template>
<script>
import slideShow from "../components/slideShow.vue";
import slide from '../test/transition/slide.vue';

export default {
    created:function(){ // created钩子可以用来在一个实例被创建之后执行代码
        this.$http.post('/api/getNewsList')
        .then(function(res){
            console.log(res);
            this.getNewsList = res.data;
        },function(err){
            console.log(err);
        })
    },
    components:{
        slideShow, //导入组件，要注册组件，而且要确保与<slide-show>一致
        slide
    },
    methods:{
        dosomething(){
            console.log('dosomething run ');
        }
    },
   data(){
      return {
        slideSpeed:2000,//初始化数据
        slides: [ //父组件传递数据到子组件
        {
          src: require('../assets/slideShow/pic1.jpg'),//异步调用图片展示，必须使用require进行导入，其他不需要
          title: 'xxx1',
          href: 'detail/analysis'
        },
        {
          src: require('../assets/slideShow/pic2.jpg'),
          title: 'xxx2',
          href: 'detail/count'
        },
        {
          src: require('../assets/slideShow/pic3.jpg'),
          title: 'xxx3',
          href: 'detail/publish'
        },
        {
          src: require('../assets/slideShow/pic4.jpg'),
          title: 'xxx4',
          href: 'detail/forecast' //跳转到路由配置的子路由地址
        }
      ],    
    boardList:[
            {
                title:'开发产品',
                description:'开发产品是一款开发产品',
                id:'car',
                saleout:false
            },
            {
                title:'品牌营销',
                description:'品牌营销帮助你是一款开发产品',
                id:'earth',
                saleout:false
            },
            {
                title:'品牌营销2',
                id:'loud',
                description:'品牌营销帮助你是一款开发产品',
                saleout:false
            },
            {
                title:'品牌营销3',
                id:'mound',
                description:'品牌营销帮助你是一款开发产品',
                saleout:false
            }
        ],
    getNewsList:[],
    productList:{
     pc:{
        title:'pc产品',
        list:[
            {
                name:'数据统计',url:'http://www.baidu.com'
            },
            {
                name:'数据预测',url:'http://www.baidu.com'
            },
            {
                name:'流量分析',url:'http://www.baidu.com',hot:true
            },
            {
                name:'广告发布',url:'http://www.baidu.com'
            }
        ]
    },
    app:{ 
        title:'应用类',
        last:true,
        list:[
            {
                name:'91助手',url:'http://www.baidu.com',hot:true
            },
            {
                name:'产品助手',url:'http://www.baidu.com'
            },
            {
                name:'智能地图',url:'http://www.baidu.com'
            },
            {
                name:'团队语音',url:'http://www.baidu.com'
            }
        ]
    }
  } 
}
  }
}
</script>

<!--scoped -->
<style scoped> 
.index-wrap{width:1200px;margin:0 auto;overflow:hidden;}
.index-left{float:left;width:300px;text-align:left;}
.index-right{float:left;width:900px;}
.index-left-block{margin:15px;background:#fff;box-shadow: 0 0 1px #ddd;}
.index-left-block .hr{margin-bottom:20px;border: 1px solid #ddd;}
.index-left-block h2{background:#4fc08d;color:#fff;padding:10px 15px;margin-bottom:20px;}
.index-left-block h3{padding:0 15px 5px 15px;font-weight:bold;color:#222;}
.index-left-block ul{padding:10px 15px;} 
.index-left-block li{padding:5px;}
.index-board-list{overflow:hidden;}
.index-board-item{float:left;width:400px;background:#fff;box-shadow: 0 0 1px #ddd;padding:20px;margin-right:20px;margin-bottom:20px;}
.index-board-item-inner{min-height:125px;padding-left:120px;}
.index-board-car .index-board-item-inner{background:url(../assets/images/1.png) no-repeat;}
.index-board-loud .index-board-item-inner{background:url(../assets/images/2.png) no-repeat;}
.index-board-earth .index-board-item-inner{background:url(../assets/images/3.png) no-repeat;}
.index-board-mound .index-board-item-inner{background:url(../assets/images/4.png) no-repeat;}
.index-board-item h2{font-size:18px;font-weight:bold;color:#000;margin-bottom:15px;}
.line-last{margin-right:0}
.index-board-button{margin-top:20px;}
.lastest-news{min-height:512px;}
.hot-tag{background:red;color:#fff;}
.new-item{display:inline-block;width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
</style>